﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Css/Default.css" rel="stylesheet" />
    <script src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://www.vietbando.com/maps/API/VBDMapAPI.js?key=e7vjH+pgQHuSyV75dwG6ho5iBCsznKyH"></script>
</head>
<body onload="BodyLoad()">
    <form id="form1" runat="server">
        <div id="header">
            <div class="logo" style="display: none;">
                <a target="_blank" href="http://www3.hochiminhcity.gov.vn/Pages/Default.aspx" style="background: none;"></a>
            </div>
            <div id="LoginDiv">

                <a id="LoginView1_LoginStatus1" href="#">Đăng Nhập</a>
                <span>|</span><a href="#">Đăng Ký</a>

            </div>
        </div>

        <div id="headerMenu">
            <ul>
                <li><a href="#" style="background: none;">
                    <img src="http://bando.hochiminhcity.gov.vn/info/images/ico_home.png" style="border: 0px; margin-top: 4px;"></a><span>
                        <img src="http://bando.hochiminhcity.gov.vn/info/images/line_span_2.png"></span></li>
                <li><a href="#">Dịch vụ</a> <span>
                    <img src="http://bando.hochiminhcity.gov.vn/info/images/line_span_2.png"></span></li>
                <li><a href="#">Giới thiệu</a><span>
                    <img src="http://bando.hochiminhcity.gov.vn/info/images/line_span_2.png"></span></li>
                <li><a href="#">Liên hệ</a><span>
                    <img src="http://bando.hochiminhcity.gov.vn/info/images/line_span_2.png"></span></li>
            </ul>
        </div>

        <div id="contener">
            <div id="LeftContent" style="height: 292px;">
                <div id="leftMenu">
                    <div id="sbwfullscreen" class="SearchBoxWrap" style="">
                        <div class="SearchBoxBor">
                            <div class="SearchBox">
                                <input type="text" class="SearchText inputText keyboardInput" id="txtSearch" placeholder="Nhập vào địa chỉ, doanh nghiệp hoặc số điện thoại...">
                                <input title="Tìm" class="SearchBtn" type="button" value="" onclick="return doSearch();">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="leftResult" style="height: 124px;">
                    <div id="layerResult" style="height: 112px;">
                        <div id="divCategoryTree" class="dataLayerGroup" style="height: 112px;"></div>
                    </div>
                </div>
            </div>

            <div class="bar-wrap" style="width: 743px;">

                <div class="tree-wrap">
                    <div class="Timo">
                        <a onclick="RenderVietNamMap()"><b lang="iview">Việt Nam</b></a>
                    </div>
                    <div id="TreeFilter">
                        <div id="map_path_div" style="display: inline; white-space: normal;">
                            <a id="area_0" onclick="TreeMenuClick()">Thành phố Hồ Chí Minh</a>

                        </div>
                    </div>
                    <div id="TreeChild">
                    </div>
                </div>
                <div class="RegionList_wrap" style="display: none; left: 80px;">
                    <div id="RegionList">
                        <div class="vnFilter" onclick="TreeMenuSelect('Tất cả',-1)">
                            <a href="javascript:void(0)">Tất cả</a>
                        </div>
                        <asp:Repeater ID="rpProvince" runat="server">
                            <ItemTemplate>
                                <div class="vnFilter" onclick="TreeMenuSelect('<%# Eval("Name") %>',<%# Eval("ProvinceID") %>)">
                                    <a href="javascript:void(0)"><%# Eval("Name") %></a>
                                </div>
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                </div>
            </div>
        </div>
        <div id="container">
        </div>
    </form>
    <script>
        $(document).ready(function () {
            $("#txtSearch").keydown(function (e) {
                if (e.which == '13') {
                    e.preventDefault();
                    doSearch();
                }
            });
        })
        function BodyLoad() {
            StartApp();
        }
        var map;
        var dtVinamilk;
        var arrMarker = [];
        function StartApp() {
            debugger;
            var myWidth = $(document).width();
            var myHeight = $(document).height();
            var container = $('#container');
            container.width(myWidth - $('#LeftContent').width() - 1);
            container.height(myHeight - 139);
            var divContainer = document.getElementById('container');
            map = new VMap(divContainer);
            map.addControl(new VLargeMapControl());
            map.addControl(new VScaleControl());
            map.setCenter(new VLatLng(10.7630381, 106.684597), 10);
            AddListeners();

            _Default.GetData(-1, BindData)
        }

        function BindData(data) {
            map.clearOverlays();
            if (data.error == null) {
                debugger;
                dtVinamilk = data.value.Rows;
                for (i = 0; i < dtVinamilk.length; i++) {
                    var pt = new VLatLng(dtVinamilk[i].Latitude, dtVinamilk[i].Longtitude);
                    map.setCenter(pt, 15);
                    mopt = new VMarkerOptions(new VIcon("css/images/Vinamilk.png", new VSize(32, 32)));
                    marker = new VMarker(pt, mopt);
                    marker.VinamilkIndex = i;
                    map.addOverlay(marker);
                }
                map.fitOverlays();
            }
        }

        function AddListeners() {
            VEvent.addListener(map, 'click', function (overlay, pt) {
                var strHTML = '<div class="MiniPopup">' +
                                  '<span class="Title">' + dtVinamilk[overlay.VinamilkIndex].VinamilkName + '</span>' +
                                  '<br>' +
                                  '<p class="Content">' +
                                  '<span class="address">' + dtVinamilk[overlay.VinamilkIndex].Address + '</span>' +
                                  '<span class="comment"></span>' +
                                  '</p>' +
                                  '<ul class="CommonFunction">' +
                                  '<li><a target="_blank" class="flnk" href="<%= UrlRoot %>/Admin/view.aspx?action=Vinamilkdetail&Vinamilkid=' + dtVinamilk[overlay.VinamilkIndex].VinamilkID + '" id="pfromhere">Sửa</a></li>' +
                                '<li><a class="flnk" onclick="ZoomMap(' + dtVinamilk[overlay.VinamilkIndex].Latitude + ',' + dtVinamilk[overlay.VinamilkIndex].Longtitude + ')" id="pviewonmap">Phóng to</a></li>' +
                                '<li><a class="flnk" id="pdetail">Chi tiết</a></li></ul>' +
                                '</div>';
                overlay.openInfoWindow(strHTML);
            });
        }

        function TreeMenuClick() {
            if ($('.RegionList_wrap').is(":visible"))
                $('.RegionList_wrap').hide();
            else
                $('.RegionList_wrap').show();

        }

        function TreeMenuSelect(name, id) {
            $('#area_0').html(name);
            $('.RegionList_wrap').hide();
            _Default.GetData(id, BindData)
        }

        function doSearch() {
            _Default.SearchData($('#txtSearch').val(), BindData);
            return false;
        }

        function ZoomMap(la, lo) {
            var pt = new VLatLng(la, lo);
            map.setCenter(pt, 15);
        }
    </script>
</body>
</html>
